<template>
  <div class="app-container">
    <el-card class="form-card" shadow="hover">
      <div slot="header" class="form-header">
        <span class="header-title">高考志愿填报</span>
        <el-steps :active="activeStep" finish-status="success" simple class="steps">
          <el-step title="第一志愿" icon="el-icon-trophy"></el-step>
          <el-step title="第二志愿" icon="el-icon-medal"></el-step>
          <el-step title="第三志愿" icon="el-icon-medal-1"></el-step>
        </el-steps>
        <div class="selected-overview">
          <div v-if="firstChoiceInfo.college" class="overview-item">
            <el-tag size="mini" type="success">一志愿</el-tag>
            <span>{{ firstChoiceInfo.college }} - {{ firstChoiceInfo.major }}</span>
          </div>
          <div v-if="secondChoiceInfo.college" class="overview-item">
            <el-tag size="mini" type="warning">二志愿</el-tag>
            <span>{{ secondChoiceInfo.college }} - {{ secondChoiceInfo.major }}</span>
          </div>
          <div v-if="thirdChoiceInfo.college" class="overview-item">
            <el-tag size="mini" type="info">三志愿</el-tag>
            <span>{{ thirdChoiceInfo.college }} - {{ thirdChoiceInfo.major }}</span>
          </div>
          <div v-if="!firstChoiceInfo.college && !secondChoiceInfo.college && !thirdChoiceInfo.college" class="overview-empty">
            <i class="el-icon-info"></i> 尚未选择任何志愿
          </div>
        </div>
      </div>

      <div class="form-content">
        <!-- 第一志愿 -->
        <div class="aspiration-section" :class="{'active-section': activeStep === 1}">
          <div class="section-title">
            <span class="title-number">01</span>
            <span class="title-text">第一志愿</span>
            <span class="title-hint">选择您最希望就读的院校和专业</span>
          </div>
          <div class="cascader-wrapper">
            <el-cascader
              v-model="firstChoice"
              placeholder="请选择院校和专业"
              :options="options1"
              :props="{ expandTrigger: 'hover', checkStrictly: false }"
              filterable
              clearable
              class="cascader-select"
              @change="handleChange1"
            >
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf" class="college-count">
                  {{ data.children.length }}个专业
                </span>
              </template>
            </el-cascader>
            <el-button type="primary" plain icon="el-icon-download" size="small" class="import-button" @click="openImportDialog(1)">导入AI推荐</el-button>
          </div>
          <div class="choice-info" v-if="firstChoiceInfo.college">
            <div class="college-info">
              <span class="college-name">{{ firstChoiceInfo.college }}</span>
              <el-tag size="small" type="success">第一志愿</el-tag>
            </div>
            <div class="major-info">{{ firstChoiceInfo.major }}</div>
          </div>
          <div class="action-buttons">
            <el-button type="primary" @click="nextStep" :disabled="!selectItem.professionNo1">下一步</el-button>
          </div>
        </div>

        <!-- 第二志愿 -->
        <div class="aspiration-section" :class="{'active-section': activeStep === 2}">
          <div class="section-title">
            <span class="title-number">02</span>
            <span class="title-text">第二志愿</span>
            <span class="title-hint">选择您的备选院校和专业</span>
          </div>
          <div class="cascader-wrapper">
            <el-cascader
              v-model="secondChoice"
              placeholder="请选择院校和专业"
              :options="options2"
              :props="{ expandTrigger: 'hover', checkStrictly: false }"
              filterable
              clearable
              class="cascader-select"
              @change="handleChange2"
            >
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf" class="college-count">
                  {{ data.children.length }}个专业
                </span>
              </template>
            </el-cascader>
            <el-button type="primary" plain icon="el-icon-download" size="small" class="import-button" @click="openImportDialog(2)">导入AI推荐</el-button>
          </div>
          <div class="choice-info" v-if="secondChoiceInfo.college">
            <div class="college-info">
              <span class="college-name">{{ secondChoiceInfo.college }}</span>
              <el-tag size="small" type="warning">第二志愿</el-tag>
            </div>
            <div class="major-info">{{ secondChoiceInfo.major }}</div>
          </div>
          <div class="action-buttons">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="nextStep" :disabled="!selectItem.professionNo2">下一步</el-button>
          </div>
        </div>

        <!-- 第三志愿 -->
        <div class="aspiration-section" :class="{'active-section': activeStep === 3}">
          <div class="section-title">
            <span class="title-number">03</span>
            <span class="title-text">第三志愿</span>
            <span class="title-hint">选择您的保底院校和专业</span>
          </div>
          <div class="cascader-wrapper">
            <el-cascader
              v-model="thirdChoice"
              placeholder="请选择院校和专业"
              :options="options3"
              :props="{ expandTrigger: 'hover', checkStrictly: false }"
              filterable
              clearable
              class="cascader-select"
              @change="handleChange3"
            >
              <template slot-scope="{ node, data }">
                <span>{{ data.label }}</span>
                <span v-if="!node.isLeaf" class="college-count">
                  {{ data.children.length }}个专业
                </span>
              </template>
            </el-cascader>
            <el-button type="primary" plain icon="el-icon-download" size="small" class="import-button" @click="openImportDialog(3)">导入AI推荐</el-button>
          </div>
          <div class="choice-info" v-if="thirdChoiceInfo.college">
            <div class="college-info">
              <span class="college-name">{{ thirdChoiceInfo.college }}</span>
              <el-tag size="small" type="info">第三志愿</el-tag>
            </div>
            <div class="major-info">{{ thirdChoiceInfo.major }}</div>
          </div>
          <div class="action-buttons">
            <el-button @click="prevStep">上一步</el-button>
            <el-button type="primary" @click="showSubmitConfirm">提交志愿</el-button>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 志愿预览对话框 -->
    <el-dialog
      title="志愿填报确认"
      :visible.sync="previewDialogVisible"
      width="500px"
      center
    >
      <div class="dialog-content">
        <div class="dialog-icon">
          <i class="el-icon-warning-outline"></i>
        </div>
        <div class="dialog-message">
          <p class="message-title">确认提交以下志愿信息吗？</p>
          <div class="message-detail">
            <p>提交后将无法修改，请仔细核对您的选择。</p>
          </div>
          
          <el-card shadow="never" class="preview-card" v-if="firstChoiceInfo.college">
            <div slot="header" class="preview-header">
              <span>第一志愿</span>
              <el-tag size="mini" type="success">首选</el-tag>
            </div>
            <div>
              <p class="preview-college">{{ firstChoiceInfo.college }}</p>
              <p class="preview-major">{{ firstChoiceInfo.major }}</p>
            </div>
          </el-card>
          
          <el-card shadow="never" class="preview-card" v-if="secondChoiceInfo.college">
            <div slot="header" class="preview-header">
              <span>第二志愿</span>
            </div>
            <div>
              <p class="preview-college">{{ secondChoiceInfo.college }}</p>
              <p class="preview-major">{{ secondChoiceInfo.major }}</p>
            </div>
          </el-card>
          
          <el-card shadow="never" class="preview-card" v-if="thirdChoiceInfo.college">
            <div slot="header" class="preview-header">
              <span>第三志愿</span>
            </div>
            <div>
              <p class="preview-college">{{ thirdChoiceInfo.college }}</p>
              <p class="preview-major">{{ thirdChoiceInfo.major }}</p>
            </div>
          </el-card>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewDialogVisible = false">再想想</el-button>
        <el-button type="primary" @click="submitForm" :loading="submitting">确认提交</el-button>
      </span>
    </el-dialog>

    <!-- 填报成功对话框 -->
    <el-dialog
      title="填报成功"
      :visible.sync="successDialogVisible"
      width="400px"
      center
      :show-close="false"
      :close-on-click-modal="false"
    >
      <div class="success-dialog">
        <div class="success-icon">
          <i class="el-icon-circle-check"></i>
        </div>
        <div class="success-message">
          <h3>志愿填报成功！</h3>
          <p>您的志愿信息已经成功提交到系统</p>
        </div>
        <div class="success-action">
          <el-button type="primary" @click="goToList">查看我的志愿</el-button>
        </div>
      </div>
    </el-dialog>

    <!-- 新增：导入推荐对话框 -->
    <el-dialog
      title="导入AI推荐志愿"
      :visible.sync="importDialogVisible"
      width="600px"
      append-to-body
    >
      <div class="import-dialog-content">
        <p class="import-hint">请从您的AI智能测评推荐列表中选择一个志愿进行导入：</p>
        <el-table :data="mockRecommendations" stripe border size="small">
          <el-table-column label="推荐院校" prop="collegeName"></el-table-column>
          <el-table-column label="推荐专业" prop="majorName"></el-table-column>
          <el-table-column label="匹配度" prop="matchScore" width="100" align="center">
             <template slot-scope="scope">
               <el-tag type="warning">{{ scope.row.matchScore }}%</el-tag>
             </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button 
                type="success" 
                plain 
                size="mini" 
                @click="handleImportSelection(scope.row)"
              >选用</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="importDialogVisible = false">取消</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import { selectItem, addForm } from "@/api/entrance/aspiration";

export default {
  created() {
    // 重新启用数据加载，以便在编辑模式下加载学生现有志愿
    this.selectItems();
    // 检查是否有学号参数（编辑模式）
    const studentNo = this.$route.query.studentNo;
    if (studentNo) {
      this.isEditMode = true;
      this.studentNo = studentNo;
    }
  },
  data() {
    return {
      activeStep: 1,
      submitting: false,
      isEditMode: false,
      studentNo: null,
      previewDialogVisible: false,
      successDialogVisible: false,
      firstChoice: [],
      secondChoice: [],
      thirdChoice: [],
      firstChoiceInfo: { college: '', major: '' },
      secondChoiceInfo: { college: '', major: '' },
      thirdChoiceInfo: { college: '', major: '' },
      options1: [
        {
          value: '10001',
          label: '清华大学',
          children: [
            { value: '080901', label: '计算机科学与技术' },
            { value: '080902', label: '软件工程' },
            { value: '080701', label: '电子信息工程' },
            { value: '080601', label: '电气工程及其自动化' },
            { value: '020204', label: '金融学' },
            { value: '080202', label: '机械工程' },
            { value: '081001', label: '土木工程' },
          ]
        },
        {
          value: '10002',
          label: '北京大学',
          children: [
            { value: '020201', label: '金融学' },
            { value: '030101K', label: '法学' },
            { value: '070101', label: '数学与应用数学' },
            { value: '050101', label: '汉语言文学' },
            { value: '071001', label: '生物科学' },
            { value: '120201K', label: '工商管理' },
            { value: '020101', label: '经济学' },
          ]
        },
        {
          value: '10248',
          label: '上海交通大学',
          children: [
            { value: '080201', label: '机械工程' },
            { value: '080401', label: '材料科学与工程' },
            { value: '100101K', label: '临床医学' },
            { value: '080801', label: '自动化' },
            { value: '080717T', label: '人工智能' },
            { value: '083500', label: '船舶与海洋工程' },
          ]
        },
        {
          value: '10003',
          label: '复旦大学',
          children: [
            { value: '071001', label: '生物科学' },
            { value: '050101', label: '汉语言文学' },
            { value: '020101', label: '经济学' },
            { value: '050301', label: '新闻学' },
            { value: '030101K', label: '法学' },
            { value: '100201K', label: '基础医学' },
          ]
        },
        {
          value: '10284',
          label: '浙江大学',
          children: [
            { value: '080910T', label: '人工智能' },
            { value: '080601', label: '电气工程及其自动化' },
            { value: '120201K', label: '工商管理' },
            { value: '090101', label: '农学' },
            { value: '100701', label: '药学' },
          ]
        },
        {
          value: '10335',
          label: '中国科学技术大学',
          children: [
              { value: '070201', label: '物理学' },
              { value: '070301', label: '化学' },
              { value: '080901', label: '计算机科学与技术' },
              { value: '070101', label: '数学与应用数学' },
          ]
        },
        {
            value: '10005',
            label: '中国人民大学',
            children: [
                { value: '020201', label: '金融学' },
                { value: '030101K', label: '法学' },
                { value: '050301', label: '新闻学' },
                { value: '120203K', label: '会计学' },
            ]
        },
        {
            value: '10007',
            label: '北京师范大学',
            children: [
                { value: '040101', label: '教育学' },
                { value: '040106', label: '学前教育' },
                { value: '071401', label: '心理学' },
                { value: '050101', label: '汉语言文学' },
            ]
        },
      ],
      options2: [
        {
          value: '10006',
          label: '南京大学',
          children: [
            { value: '070301', label: '化学' },
            { value: '060101', label: '历史学' },
            { value: '080906', label: '信息安全' },
            { value: '070205', label: '天文学' },
            { value: '050201', label: '英语' },
          ]
        },
        {
          value: '10486',
          label: '武汉大学',
          children: [
              { value: '081301', label: '测绘工程' },
              { value: '081001', label: '土木工程' },
              { value: '050301', label: '新闻学' },
              { value: '020201', label: '金融学' },
              { value: '100101K', label: '临床医学' },
          ]
        },
        {
          value: '10213',
          label: '哈尔滨工业大学',
          children: [
              { value: '080201', label: '机械工程' },
              { value: '080801', label: '自动化' },
              { value: '080401', label: '材料科学与工程' },
              { value: '082601', label: '飞行器设计与工程' },
          ]
        },
        {
            value: '10698',
            label: '西安交通大学',
            children: [
                { value: '080601', label: '电气工程及其自动化' },
                { value: '080501', label: '能源与动力工程' },
                { value: '120203K', label: '会计学' },
                { value: '100201K', label: '基础医学' },
            ]
        },
        {
            value: '10487',
            label: '华中科技大学',
            children: [
                { value: '080201', label: '机械工程' },
                { value: '080701', label: '电子信息工程' },
                { value: '100101K', label: '临床医学' },
                { value: '080801', label: '自动化' },
            ]
        },
        {
            value: '10055',
            label: '南开大学',
            children: [
                { value: '070101', label: '数学与应用数学' },
                { value: '070301', label: '化学' },
                { value: '020101', label: '经济学' },
                { value: '060101', label: '历史学' },
            ]
        },
        {
            value: '10056',
            label: '天津大学',
            children: [
                { value: '080401', label: '材料科学与工程' },
                { value: '081001', label: '土木工程' },
                { value: '081701', label: '化学工程与工艺' },
                { value: '082801', label: '建筑学' },
            ]
        },
        {
            value: '10558',
            label: '中山大学',
            children: [
                { value: '100101K', label: '临床医学' },
                { value: '020101', label: '经济学' },
                { value: '120201K', label: '工商管理' },
                { value: '070101', label: '数学与应用数学' },
            ]
        },
      ],
      options3: [
        {
          value: '10384',
          label: '厦门大学',
          children: [
            { value: '120101', label: '管理科学' },
            { value: '020301K', label: '财政学' },
            { value: '050301', label: '新闻学' },
            { value: '071001', label: '生物科学' },
          ]
        },
        {
            value: '10701',
            label: '四川大学',
            children: [
                { value: '100101K', label: '临床医学' },
                { value: '100701', label: '药学' },
                { value: '050101', label: '汉语言文学' },
                { value: '080401', label: '材料科学与工程' },
            ]
        },
        {
            value: '10286',
            label: '东南大学',
            children: [
                { value: '081001', label: '土木工程' },
                { value: '082801', label: '建筑学' },
                { value: '080701', label: '电子信息工程' },
                { value: '081101', label: '控制科学与工程' },
            ]
        },
        {
            value: '10183',
            label: '吉林大学',
            children: [
                { value: '030101K', label: '法学' },
                { value: '070301', label: '化学' },
                { value: '080201', label: '机械工程' },
                { value: '080401', label: '材料科学与工程' },
            ]
        },
        {
            value: '10422',
            label: '山东大学',
            children: [
                { value: '070101', label: '数学与应用数学' },
                { value: '100101K', label: '临床医学' },
                { value: '050101', label: '汉语言文学' },
                { value: '080601', label: '电气工程及其自动化' },
            ]
        },
        {
            value: '10532',
            label: '湖南大学',
            children: [
                { value: '081001', label: '土木工程' },
                { value: '081701', label: '化学工程与工艺' },
                { value: '020201', label: '金融学' },
                { value: '080204', label: '车辆工程' },
            ]
        },
        {
            value: '10533',
            label: '中南大学',
            children: [
                { value: '100101K', label: '临床医学' },
                { value: '080401', label: '材料科学与工程' },
                { value: '081501', label: '采矿工程' },
                { value: '081301', label: '测绘工程' },
            ]
        },
         {
            value: '10611',
            label: '重庆大学',
            children: [
                { value: '080601', label: '电气工程及其自动化' },
                { value: '081001', label: '土木工程' },
                { value: '082801', label: '建筑学' },
                { value: '120203K', label: '会计学' },
            ]
        },
        {
            value: '11000',
            label: '模拟财经大学',
            children: [
                { value: '120203K', label: '会计学' },
                { value: '120204', label: '财务管理' },
                { value: '020301K', label: '财政学' },
                { value: '020201', label: '金融学' }
            ]
        },
        {
            value: '11001',
            label: '模拟师范学院',
            children: [
                { value: '040107', label: '科学教育' },
                { value: '040106', label: '学前教育' },
                { value: '040102', label: '特殊教育' },
                { value: '050201', label: '英语' }
            ]
        },
        {
          value: '99999',
          label: '模拟地方学院',
          children: [
            { value: '140101', label: '学前教育' },
            { value: '120901K', label: '旅游管理' },
            { value: '050207', label: '日语' }
          ]
        }
      ],
      selectItem: {
        professionNo1: "",
        professionNo2: "",
        professionNo3: "",
      },
      // 新增：导入对话框状态
      importDialogVisible: false,
      currentImportSlot: null, // 1, 2, or 3
      // 新增：模拟AI推荐数据
      mockRecommendations: [
        { collegeName: '清华大学', majorName: '计算机科学与技术', matchScore: 96 },
        { collegeName: '北京大学', majorName: '金融学', matchScore: 94 },
        { collegeName: '浙江大学', majorName: '人工智能', matchScore: 91 },
        { collegeName: '复旦大学', majorName: '新闻学', matchScore: 88 },
        { collegeName: '上海交通大学', majorName: '临床医学', matchScore: 85 },
        { collegeName: '南京大学', majorName: '化学', matchScore: 82 },
      ]
    };
  },
  methods: {
    /** 步骤控制 */
    nextStep() {
      if (this.activeStep < 3) {
        this.activeStep += 1;
      }
    },
    prevStep() {
      if (this.activeStep > 1) {
        this.activeStep -= 1;
      }
    },
    
    /** 值变化处理 */
    handleChange1(value) {
      const currentProfessionNo = value && value.length >= 2 ? value[1] : null;
      // 检查是否与第二或第三志愿重复
      if (currentProfessionNo && 
          (currentProfessionNo === this.selectItem.professionNo2 || currentProfessionNo === this.selectItem.professionNo3)) {
        this.$message.warning('该院校专业已在其他志愿中选择，请选择不同项。');
        this.firstChoice = []; // 清空当前选择
        this.selectItem.professionNo1 = ""; // 清空记录的值
        this.firstChoiceInfo = { college: '', major: '' }; // 清空显示信息
        return;
      }
      
      if (value && value.length >= 2) {
        this.selectItem.professionNo1 = value[1];
        // 找到选择的学校和专业信息
        const college = this.findOptionByValue(this.options1, value[0]);
        const major = this.findOptionByValue(college ? college.children : [], value[1]);
        this.firstChoiceInfo = {
          college: college ? college.label : '',
          major: major ? major.label : ''
        };
      } else {
        this.selectItem.professionNo1 = "";
        this.firstChoiceInfo = { college: '', major: '' };
      }
    },
    handleChange2(value) {
      const currentProfessionNo = value && value.length >= 2 ? value[1] : null;
       // 检查是否与第一或第三志愿重复
      if (currentProfessionNo && 
          (currentProfessionNo === this.selectItem.professionNo1 || currentProfessionNo === this.selectItem.professionNo3)) {
        this.$message.warning('该院校专业已在其他志愿中选择，请选择不同项。');
        this.secondChoice = []; // 清空当前选择
        this.selectItem.professionNo2 = ""; // 清空记录的值
        this.secondChoiceInfo = { college: '', major: '' }; // 清空显示信息
        return;
      }
      
      if (value && value.length >= 2) {
        this.selectItem.professionNo2 = value[1];
        // 找到选择的学校和专业信息
        const college = this.findOptionByValue(this.options2, value[0]);
        const major = this.findOptionByValue(college ? college.children : [], value[1]);
        this.secondChoiceInfo = {
          college: college ? college.label : '',
          major: major ? major.label : ''
        };
      } else {
        this.selectItem.professionNo2 = "";
        this.secondChoiceInfo = { college: '', major: '' };
      }
    },
    handleChange3(value) {
      const currentProfessionNo = value && value.length >= 2 ? value[1] : null;
       // 检查是否与第一或第二志愿重复
      if (currentProfessionNo && 
          (currentProfessionNo === this.selectItem.professionNo1 || currentProfessionNo === this.selectItem.professionNo2)) {
        this.$message.warning('该院校专业已在其他志愿中选择，请选择不同项。');
        this.thirdChoice = []; // 清空当前选择
        this.selectItem.professionNo3 = ""; // 清空记录的值
        this.thirdChoiceInfo = { college: '', major: '' }; // 清空显示信息
        return;
      }
      
      if (value && value.length >= 2) {
        this.selectItem.professionNo3 = value[1];
        // 找到选择的学校和专业信息
        const college = this.findOptionByValue(this.options3, value[0]);
        const major = this.findOptionByValue(college ? college.children : [], value[1]);
        this.thirdChoiceInfo = {
          college: college ? college.label : '',
          major: major ? major.label : ''
        };
      } else {
        this.selectItem.professionNo3 = "";
        this.thirdChoiceInfo = { college: '', major: '' };
      }
    },
    
    // 根据值查找选项
    findOptionByValue(options, value) {
      if (!options || !Array.isArray(options)) return null;
      return options.find(option => option.value === value);
    },
    
    /** 志愿填报选项 */
    selectItems() {
      this.loading = true;
      selectItem().then(
        response => {
          if (response.code === 200 && response.data) {
            this.options1 = response.data.items || [];
            this.options2 = response.data.items || [];
            this.options3 = response.data.items || [];
            
            // 如果有已填写的志愿，显示在表单上
            if (response.data.professionNo1) {
              this.selectItem.professionNo1 = response.data.professionNo1;
              // 查找对应的学校和专业
              this.findAndSetExistingChoice(1);
            }
            
            if (response.data.professionNo2) {
              this.selectItem.professionNo2 = response.data.professionNo2;
              this.findAndSetExistingChoice(2);
            }
            
            if (response.data.professionNo3) {
              this.selectItem.professionNo3 = response.data.professionNo3;
              this.findAndSetExistingChoice(3);
            }
          }
          this.loading = false;
        }
      ).catch(() => {
        this.loading = false;
        this.$message.error("获取志愿填报选项失败");
      });
    },
    
    // 查找并设置已存在的选择
    findAndSetExistingChoice(choiceNumber) {
      const professionNo = this.selectItem[`professionNo${choiceNumber}`];
      if (!professionNo) return;
      
      const options = this[`options${choiceNumber}`];
      
      // 查找专业所属的学校
      let targetCollege = null;
      let targetMajor = null;
      
      for (const college of options) {
        if (college.children && Array.isArray(college.children)) {
          for (const major of college.children) {
            if (major.value === professionNo) {
              targetCollege = college;
              targetMajor = major;
              break;
            }
          }
        }
        if (targetCollege) break;
      }
      
      if (targetCollege && targetMajor) {
        this[`choice${choiceNumber === 1 ? 'first' : choiceNumber === 2 ? 'second' : 'third'}`] = [
          targetCollege.value,
          targetMajor.value
        ];
        
        this[`${choiceNumber === 1 ? 'first' : choiceNumber === 2 ? 'second' : 'third'}ChoiceInfo`] = {
          college: targetCollege.label,
          major: targetMajor.label
        };
      }
    },
    
    /** 确认和提交 */
    showSubmitConfirm() {
      // 至少填写一个志愿
      if (!this.selectItem.professionNo1 && !this.selectItem.professionNo2 && !this.selectItem.professionNo3) {
        this.$message.warning("请至少填写一个志愿");
        return;
      }
      this.previewDialogVisible = true;
    },
    
    submitForm() {
      this.submitting = true;
      
      // 如果是编辑模式，则需要添加学号参数
      const formData = { ...this.selectItem };
      if (this.isEditMode && this.studentNo) {
        formData.studentNo = this.studentNo;
      }
      
      addForm(formData).then(
        response => {
          this.submitting = false;
          this.previewDialogVisible = false;
          
          if (response.code === 200 && response.data === true) {
            this.successDialogVisible = true;
          } else {
            this.$message.error(response.msg || "志愿填报提交失败");
          }
        }
      ).catch(() => {
        this.submitting = false;
        this.previewDialogVisible = false;
        this.$message.error("志愿填报提交异常");
      });
    },
    
    /** 导航到列表页 */
    goToList() {
      this.successDialogVisible = false;
      this.$router.push({ path: '/entrance/aspiration' });
    },

    /** 打开导入对话框 */
    openImportDialog(slotNumber) {
      this.currentImportSlot = slotNumber;
      this.importDialogVisible = true;
    },

    /** 处理导入选择 */
    handleImportSelection(recommendation) {
      if (!this.currentImportSlot) return;

      const targetSlot = this.currentImportSlot;
      const targetOptions = this[`options${targetSlot}`];
      const collegeName = recommendation.collegeName;
      const majorName = recommendation.majorName;

      // 1. 在 options 中查找对应的 value
      let collegeValue = null;
      let majorValue = null;
      let collegeLabel = '';
      let majorLabel = '';

      const foundCollege = targetOptions.find(opt => opt.label === collegeName);
      if (foundCollege && foundCollege.children) {
        const foundMajor = foundCollege.children.find(major => major.label === majorName);
        if (foundMajor) {
          collegeValue = foundCollege.value;
          majorValue = foundMajor.value;
          collegeLabel = foundCollege.label;
          majorLabel = foundMajor.label;
        }
      }

      if (!collegeValue || !majorValue) {
        this.$message.error(`未在当前志愿选项中找到推荐的"${collegeName} - ${majorName}"`);
        return;
      }

      // 2. 执行重复性检查
      const isDuplicate = 
        (targetSlot !== 1 && majorValue === this.selectItem.professionNo1) ||
        (targetSlot !== 2 && majorValue === this.selectItem.professionNo2) ||
        (targetSlot !== 3 && majorValue === this.selectItem.professionNo3);

      if (isDuplicate) {
        this.$message.warning('导入失败：该院校专业已在其他志愿中选择。');
        return;
      }

      // 3. 更新数据
      const choiceModelKey = targetSlot === 1 ? 'firstChoice' : targetSlot === 2 ? 'secondChoice' : 'thirdChoice';
      const infoKey = targetSlot === 1 ? 'firstChoiceInfo' : targetSlot === 2 ? 'secondChoiceInfo' : 'thirdChoiceInfo';
      const selectItemKey = `professionNo${targetSlot}`;

      this[choiceModelKey] = [collegeValue, majorValue];
      this.selectItem[selectItemKey] = majorValue;
      this[infoKey] = { college: collegeLabel, major: majorLabel };

      this.$message.success(`已成功将"${collegeLabel} - ${majorLabel}"导入到第 ${targetSlot} 志愿`);
      this.importDialogVisible = false; // 关闭对话框
      this.currentImportSlot = null; // 重置目标槽位
    }
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 120px);
  
  .form-card {
    border-radius: 8px;
    
    .form-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;
      position: relative;
      
      .header-title {
        font-size: 18px;
        font-weight: bold;
        color: #303133;
        margin-right: 20px;
      }
      
      .steps {
        flex: 1;
        min-width: 300px;
        margin-right: 20px;
      }
      
      .selected-overview {
        width: 100%;
        margin-top: 15px;
        padding: 10px 15px;
        background-color: #f5f7fa; 
        border: 1px dashed #e4e7ed;
        border-radius: 4px;
        font-size: 13px;
        color: #606266;
        display: flex;
        flex-direction: column;
        gap: 8px;
        
        .overview-item {
          display: flex;
          align-items: center;
          gap: 8px;
          
          .el-tag {
             flex-shrink: 0;
          }
          
          span {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
        
        .overview-empty {
          color: #909399;
          display: flex;
          align-items: center;
          justify-content: center;
          gap: 5px;
          padding: 5px 0;
        }
        
        @media (min-width: 1200px) {
           width: auto;
           max-width: 350px;
           margin-top: 0;
           margin-left: auto;
        }
      }
    }
    
    .form-content {
      margin-top: 20px;
      position: relative;
      min-height: 250px;
      
      .aspiration-section {
        margin-bottom: 30px;
        padding: 20px;
        border: 1px solid transparent;
        border-radius: 4px;
        transition: opacity 0.5s ease-in-out, background-color 0.3s ease;
        opacity: 0.4;
        pointer-events: none;
        background-color: #fdfdfd;
        
        &.active-section {
          opacity: 1;
          pointer-events: auto;
          border-color: #e4e7ed;
          background-color: #fff;
          box-shadow: 0 1px 4px rgba(0,0,0,0.05);
        }
        
        .section-title {
          margin-bottom: 25px;
          padding-bottom: 15px;
          border-bottom: 1px dashed #eee;
          
          .title-number {
            display: inline-block;
            width: 30px;
            height: 30px;
            line-height: 30px;
            text-align: center;
            background-color: #409EFF;
            color: white;
            border-radius: 50%;
            font-weight: bold;
            margin-right: 10px;
          }
          
          .title-text {
            font-size: 16px;
            font-weight: bold;
            margin-right: 10px;
          }
          
          .title-hint {
            font-size: 14px;
            color: #909399;
          }
        }
        
        .cascader-wrapper {
          display: flex;
          align-items: center;
          gap: 10px;
          margin-bottom: 25px;
          
          .cascader-select {
            flex-grow: 1;
          }
          
          .import-button {
            flex-shrink: 0;
          }
        }
        
        .college-count {
          color: #909399;
          font-size: 12px;
          margin-left: 10px;
        }
        
        .choice-info {
          background-color: #f8f8f8;
          padding: 15px;
          border-radius: 4px;
          margin-bottom: 30px;
          border: 1px solid #eee;
          
          .college-info {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
            
            .college-name {
              font-size: 16px;
              font-weight: bold;
            }
          }
          
          .major-info {
            color: #606266;
          }
        }
        
        .action-buttons {
          display: flex;
          justify-content: flex-end;
          margin-top: 30px;
          padding-top: 20px;
          border-top: 1px solid #f0f0f0;
          
          .el-button {
            min-width: 100px;
            margin-left: 10px;
          }
        }
      }
    }
  }
  
  .dialog-content {
    display: flex;
    align-items: flex-start;
    
    .dialog-icon {
      font-size: 36px;
      color: #E6A23C;
      margin-right: 20px;
    }
    
    .dialog-message {
      flex: 1;
      
      .message-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      
      .message-detail {
        color: #606266;
        margin-bottom: 20px;
      }
      
      .preview-card {
        margin-bottom: 10px;
        
        &:last-child {
          margin-bottom: 0;
        }
        
        .preview-header {
          display: flex;
          align-items: center;
          
          .el-tag {
            margin-left: 10px;
          }
        }
        
        .preview-college {
          font-weight: bold;
          margin-bottom: 5px;
        }
        
        .preview-major {
          color: #606266;
        }
      }
    }
  }
  
  .success-dialog {
    text-align: center;
    padding: 20px 0;
    
    .success-icon {
      font-size: 60px;
      color: #67C23A;
      margin-bottom: 20px;
    }
    
    .success-message {
      margin-bottom: 30px;
      
      h3 {
        margin-bottom: 10px;
      }
      
      p {
        color: #606266;
      }
    }
  }
}

.import-dialog-content {
  .import-hint {
    color: #606266;
    margin-bottom: 15px;
  }
}
</style>
